<template>
  <div class="mod-config">
    <el-form :inline="true">
      <el-form-item>
        <date-phase ref="datePhase" dateTypeRange="23" :datePhase="datePhase" ></date-phase>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getReport()" :loading="dataListLoading">查询</el-button>
        <el-button type="primary" @click="exportExcel">导出</el-button>
      </el-form-item>
    </el-form>
      <el-table :data="reportItems" style="width: 100%;" id="sale-table" :height="documentClientHeight">
        <el-table-column
            prop="datePhase"
            label="时间"
            min-width="120">
        </el-table-column>
        <el-table-column
          label="业绩（美金）">
          <el-table-column
            prop="saleB2bOldCustomer"
            label="ToB老客户"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="saleB2bNewCustomer"
            label="ToB新客户"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="saleB2b"
            label="ToB合计"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="saleExpress"
            label="速卖通"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="saleAmazonEbay"
            label="A/E"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="saleB2cOther"
            label="B2SC"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="saleSelfSite"
            label="官网"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="saleTotal"
            label="合计"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="saleMom"
            label="环比增长%"
            min-width="100">
          </el-table-column>
          <el-table-column v-if="currentDateType==3"
            prop="saleLastYearDt" 
            label="2019业绩"
            min-width="100">
          </el-table-column>
          <el-table-column v-if="currentDateType==3"
            prop="saleYoy"
            label="同比增长%"
            min-width="100">
          </el-table-column>
        </el-table-column>
        <el-table-column
          label="广告营销成本（美金）">
          <el-table-column
            prop="adCostB2b"
            label="ToB"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="adCostExpress"
            label="速卖通"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="adCostAmazonEbay"
            label="A/E"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="adCostB2cOther"
            label="B2SC"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="adCostSelfSite"
            label="官网"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="adCostTotal"
            label="合计"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="adCostMom"
            label="环比增长%"
            min-width="100">
          </el-table-column>
        </el-table-column>
        <el-table-column
          label="折扣营销成本（美金）">
          <el-table-column
            prop="discountB2b"
            label="ToB"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="discountExpress"
            label="速卖通"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="discountAmazonEbay"
            label="A/E"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="discountB2cOther"
            label="B2SC"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="discountSelfSite"
            label="官网"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="discountTotal"
            label="合计"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="discountMom"
            label="环比增长%"
            min-width="100">
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
</template>

<script>
  import DatePhase from  '@/components/sale/date-phase'
  import dingMixin from  '@/mixins/ding'
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'

  export default {
    data () {
      return {
        datePhase:{
            dateType: 3,
            value:'',
            to:''
        },
        currentDateType: 2,
        dialogVisible:false,
        dingId:'',
        documentClientHeight:400,
        dataListLoading: false,
        saveLoading:false,
        reportItems:[]
      }
    },
    mixins: [dingMixin],
    components: {
      DatePhase
    },
    activated () {
      //this.getDataList()

    },
    created(){
        this.documentClientHeight = document.documentElement['clientHeight'] - 220
        window.onresize = () => {
          this.documentClientHeight = document.documentElement['clientHeight'] - 220
        }
    },
    methods: {
      exportExcel(){
        this.$nextTick(function () {
          let wb = XLSX.utils.table_to_book(document.getElementById('sale-table'));
          let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
          try {
            FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '业绩汇总.xlsx')
          } catch (e) {
            if (typeof console !== 'undefined') console.log(e, wbout)
          }
          return wbout;
        });
      },
      // 获取数据列表
      getReport () {
        if(this.datePhase.value == null || this.datePhase.value == ''){
          this.$message({message: '请选择时间', type: 'error', duration: 3000})
          return
        }
        this.currentDateType = this.datePhase.dateType
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/sale/getAllSaleInfo'),
          method: 'get',
          params: this.$http.adornParams({
            'datePhase': this.datePhase.value,
            'dateType': this.datePhase.dateType,
            'to': this.datePhase.to,
            'dingId': this.dingId
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.reportItems = data.data
          } else {
            this.reportItems = []
          }
        }).finally(()=>{
          this.dataListLoading = false
        })
      }
    }
  }
</script>
<style lang="scss">

  .el-table{
    font-size: 12px;
  }

  .edit-cell{
    width: 60px;
  }

  .el-input-number.is-without-controls .el-input__inner{
    padding: 0;
    text-align: left;
  }

</style>
